import React, { PropTypes } from 'react';
import { Button, Table } from 'antd';
import EditableCell from 'components/common/editableCell';
import _ from 'underscore';

class TabelForm extends React.Component {
  constructor(props) {
    super(props);

    // let selectedRowKeys = this.getChangedKey(this.props.value);

    this.state = {
      selectedRowKeys: [],
    };
  }

  componentWillReceiveProps(nextProps) {
    var keys = this.getChangedKey(nextProps.value);
    this.setState({
      selectedRowKeys: keys,
    });
  }

  getChangedKey = (values) => {
    const primaryIndex = _.find(
      values,
      item => item.uniqueKey == true
    );

    return primaryIndex ? [primaryIndex.key] : [];
  }

  onCellChange = (index, key) => {
    return (val) => {
      const value = [...this.props.value];
      value[index][key] = val;
      this.onChange(value);
    };
  }

  onSelectChange = (no, record) => {
    var key = record[0].key;
    var selectedKey = this.state.selectedRowKeys && this.state.selectedRowKeys[0];
    var value = this.props.value;
    _.each(
      value,
      item => {
        if (item.key === key) {
          item.uniqueKey = true;
        }
        else {
          item.uniqueKey = false;
        }
      }
    );
    this.setState({ selectedRowKeys: [key] });
    this.onChange(value);
  }

  onChange = (value) => {
    this.props.onChange(value);
  }

  toDelete = (key) => {
    var value = _.filter(
      this.props.value,
      item => item.key !== key
    );
    this.onChange(value);
  }

  onDelete = (index) => {
    const dataSource = [...this.state.dataSource];
    dataSource.splice(index, 1);
    this.setState({ dataSource });
  }

  handleAdd = () => {
    const { value } = this.props;
    const newLine = {
      "boost": 0,
      "copyToField": '',
      "defaultValue": "",
      "fieldComment": "string",
      "fieldName": "fieldName",
      "fieldTypeId": 0,
      "id": '', // 这个字段
      "indexed": false,
      "multiValued": false,
      "required": false,
      "stored": false,
      "termVectors": false,
      "uniqueKey": false,
      "key": value.length
    };
    value.push(newLine);
    this.onChange(value);
  }

  render() {

    var metaTypes = _.reduce(
      this.props.enums.metaTypes,
      (memo, item) => {
        memo[item.id] = item.fieldType;
        return memo;
      },
      {}
    );

    let columns = [
      {
        title: '字段名称',
        dataIndex: 'fieldName',
        width: 140,
        render: (value, record, index) => (
          <EditableCell
            value = { value }
            onChange = {this.onCellChange(index, 'fieldName')}
          />
        ),
      },
      {
        title: '字段类型',
        dataIndex: 'fieldTypeId',
        width: 120,
        render: (value, record, index) => (
          <EditableCell
            cellType = "Select"
            dataSource = { metaTypes }
            value = { value + '' }
            onChange = {this.onCellChange(index, 'fieldTypeId')}
          />
        ),
      },
      {
        title: '必填',
        dataIndex: 'required',
        width: 50,
        render: (value, record, index) => (
          <EditableCell
            cellType = "Checkbox"
            value = { value }
            onChange = {this.onCellChange(index, 'required')}
          />
        ),
      },
      {
        title: '索引',
        dataIndex: 'indexed',
        width: 50,
        render: (value, record, index) => (
          <EditableCell
            cellType = "Checkbox"
            value = { value }
            onChange = {this.onCellChange(index, 'indexed')}
          />
        ),
      },
      {
        title: '存储原始值',
        dataIndex: 'stored',
        width: 100,
        render: (value, record, index) => (
          <EditableCell
            cellType = "Checkbox"
            value = { value }
            onChange = {this.onCellChange(index, 'stored')}
          />
        ),
      },
      {
        title: '存储原始值',
        dataIndex: 'multiValued',
        width: 100,
        render: (value, record, index) => (
          <EditableCell
            cellType = "Checkbox"
            value = { value }
            onChange = {this.onCellChange(index, 'multiValued')}
          />
        ),
      },
      {
        title: '默认值',
        dataIndex: 'defaultValue',
        width: 80,
        render: (value, record, index) => (
          <EditableCell
            value = { value }
            onChange = {this.onCellChange(index, 'defaultValue')}
          />
        ),
      },
      {
        title: '复制到',
        dataIndex: 'copyToField',
        width: 300,
        render: (value, record, index) => {
          let val = !!value ? value.split(',') : [];
          return (
            <EditableCell
              cellType = "MultipleSelect"
              dataSource = { this.props.enums.copyPath }
              value = { val }
              onChange = {this.onCellChange(index, 'copyToField')}
            />
          );
        }
      },
      {
        title: '操作',
        width: 120,
        key: 'action',
        render: (text, record, index) => (
          <Button
            type="primary" onClick={
                (e) => {
                  this.toDelete(index);
                }
              }
          >删除</Button>),
      },
    ];

    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: this.onSelectChange,
      type: 'radio',
    };

    return (
      <div>
        <Button type="primary" className="ant-btn" onClick={ this.handleAdd }>添加</Button>
        <Table
          columns = { columns }
          dataSource = { this.props.value }
          rowSelection = { rowSelection }
          pagination = { false }
          rowKey = "key"
        />
      </div>
    );
  }
}

TabelForm.propTypes = {};

export default TabelForm;
